<template>
  <el-dialog title="选择产品信息" v-model="showDialog" :width="dialogWidth" :append-to-body="true" :close-on-click-modal="false">
    <div class="bform">
      <div class="h1">
        <div><el-input v-model="ser.key" @blur="search"></el-input></div>
      </div>
      <div class="b1">
        <el-table :data="tables" border class="table" ref="multipleTable" header-cell-class-name="table-header">
          <el-table-column prop="code" label="产品编码"></el-table-column>
          <el-table-column prop="name" label="产品名称"></el-table-column>
          <el-table-column prop="money" label="产品单价" :formatter="priceformatter"></el-table-column>
          <el-table-column prop="spec" label="产品规格"></el-table-column>
          <el-table-column label="选择">
            <template #default="scope">
              <el-button @click.stop="checkClick(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>
<script>
let fun = () => {}
export default {
  data() {
    return {
      ser: {
        key: '',
      },
      tables: [],
      showDialog: false,
      dialogWidth: window.innerWidth > 778 ? '80%' : '100%',
    }
  },
  methods: {
    search() {
      this.$api.product.search(this.ser).then(({ msg: { items } }) => {
        this.tables = items
      })
    },
    show() {
      this.showDialog = true
      this.search()
      return new Promise((resolve, reject) => {
        fun = resolve
      })
    },
    checkClick(row) {
      this.showDialog = false
      fun(row)
    },
    priceformatter(...arr) {
      const unit = arr[0].unit
      return arr[2] + '元' + (unit ? `/${unit}` : '')
    },
  },
}
</script>
<style lang="scss" scoped>
.bform {
  width: 100%;
  height: 500px;
  display: grid;
  grid-template-rows: 50px 1fr;

  .h1 {
    display: grid;
    grid-template-columns: 1fr 100px;
  }

  .b1 {
    overflow-y: auto;

    .item {
      height: 40px;
      line-height: 40px;
      text-indent: 10px;
      font-size: 16px;
      cursor: pointer;

      &:hover {
        background-color: #00000010;
        font-weight: bold;
      }
    }
  }
}
</style>
